{extend name="$admin_layout" /}
{block name="content"}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品进货库存导入</title>
    <!-- element -->
    <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/plugins/vue/vue.min.js"></script>
    <!-- 引入组件库 element -->
    <script src="/static/plugins/element-ui/element-ui.js"></script>
    <style>
        #el{
            padding: 20px;
        }
        .upload-wrap{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 80px;
            padding-left: 50px;
        }
        input[type=file]{
            display: none;
        }
        .el-button{
            padding: 0 15px;
            margin:0 10px;
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>

<body>
    <div id="el">
        <div class="upload-wrap">
            <el-upload
                class="upload-demo"
                :action="url"
                :before-upload="beforeUpload"
                name="excel"
                :show-file-list="false"
                :on-success="onSuccess">
                <el-button size="small" type="primary">{:lang('点击上传')}</el-button>
                <!-- <div slot="tip" class="el-upload__tip">{:lang('只能上传')}jpg/png{:lang('文件')}，{:lang('且不超过')}500kb</div> -->
            </el-upload> 
            <!-- <el-button type="primary" style="display: flex;justify-content: center;align-items: center;">
                <a href="download_model" style="color:#ffffff;font-size: 12px;margin-top: -2px">{:lang('下载模板')}</a>
            </el-button> -->
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="file_name" label="{:lang('上传文件')}">
            </el-table-column>
            <el-table-column prop="upload_time" label="{:lang('上传时间')}">
            </el-table-column>
            <el-table-column prop="file_size" label="{:lang('文件大小')}(KB)">
            </el-table-column>
            <el-table-column prop="status" label="{:lang('处理状态')}">
            </el-table-column>
            <el-table-column prop="update_time" label="{:lang('处理完成时间')}">
            </el-table-column>
            <el-table-column prop="success_line" label="{:lang('处理成功条数')}">
            </el-table-column>
            <el-table-column prop="fail_line" label="{:lang('处理失败条数')}">
            </el-table-column>
            <el-table-column  label="{:lang('操作')}" align="center">
                <template slot-scope="scope" >
                    <a download :href="scope.row.file_url" style="color:#409EFF;">{:lang('下载')}</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <input type="hidden" id="data_list" name="data_list" value="{$data_list}">

</body>

</html>
{/block}
{block name="script"}
<script>
    let data_list = JSON.parse($('#data_list').val());
    // console.log(data_list);
    new Vue({
        el: '#el',
        data() {
            return {
                input3: '',
                value1: '',
                tableData: data_list.data|| [],
                url:'stock_upload'
            }
        },
        mounted() {

        },
        methods: {
            beforeUpload(res){

            },
            onSuccess(res){
                // console.log(res)
                if(res.code == 1){
                    this.$message.success(res.msg);
                    setTimeout(function() {
                        location.reload();
                    }, 800)
                }else{
                    this.$message.error(res.msg);
                }
            }
        },
    })
</script>
{/block}